<template>
  <div class="dept-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>科室管理</span>
          <el-button type="primary" @click="handleCreate">新增科室</el-button>
        </div>
      </template>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="deptCode" label="科室编码" width="120" />
        <el-table-column prop="deptName" label="科室名称" width="180" />
        <el-table-column prop="hospitalId" label="所属医院" width="120" />
        <el-table-column prop="delFlag" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.delFlag === 'N' ? 'success' : 'danger'">
              {{ scope.row.delFlag === 'N' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button 
              size="small" 
              :type="scope.row.delFlag === 'N' ? 'danger' : 'success'"
              @click="toggleStatus(scope.row)"
            >
              {{ scope.row.delFlag === 'N' ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="120px">
        <el-form-item label="科室编码" required>
          <el-input v-model="form.deptCode" />
        </el-form-item>
        <el-form-item label="科室名称" required>
          <el-input v-model="form.deptName" />
        </el-form-item>
        <el-form-item label="所属医院" required>
          <el-select v-model="form.hospitalId" placeholder="请选择">
            <el-option
              v-for="hospital in hospitals"
              :key="hospital.id"
              :label="hospital.name"
              :value="hospital.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { fetchDepts, createDept, updateDept, toggleDeptStatus } from '@/api/dept'
import type { Dept } from '@/api/dept'

// 表格数据
const tableData = ref<Dept[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框控制
const dialogVisible = ref(false)
const dialogTitle = ref('新增科室')
const form = reactive({
  id: undefined,
  deptCode: '',
  deptName: '',
  hospitalId: undefined
})

// 医院列表
const hospitals = ref([
  { id: 1, name: '第一医院' },
  { id: 2, name: '第二医院' }
])

// 加载科室数据
const loadData = async () => {
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value
    }
    const res = await fetchDepts(params)
    tableData.value = res.records
    total.value = res.total
  } catch (error) {
    console.error('加载科室数据失败:', error)
  }
}

// 分页变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadData()
}

// 新增科室
const handleCreate = () => {
  dialogTitle.value = '新增科室'
  form.id = undefined
  form.deptCode = ''
  form.deptName = ''
  form.hospitalId = undefined
  dialogVisible.value = true
}

// 编辑科室
const handleEdit = (row: Dept) => {
  dialogTitle.value = '编辑科室'
  form.id = row.id
  form.deptCode = row.deptCode
  form.deptName = row.deptName
  form.hospitalId = row.hospitalId
  dialogVisible.value = true
}

// 切换状态
const toggleStatus = async (row: Dept) => {
  try {
    await toggleDeptStatus(row.id, row.delFlag === 'N' ? 'Y' : 'N')
    loadData()
  } catch (error) {
    console.error('切换状态失败:', error)
  }
}

// 提交表单
const submitForm = async () => {
  try {
    if (form.id) {
      await updateDept(form as Dept)
    } else {
      await createDept(form)
    }
    dialogVisible.value = false
    loadData()
  } catch (error) {
    console.error('保存失败:', error)
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.dept-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
